<template>
  <div>
    <div>
      <el-input type="textarea" :rows="4" v-model="textarea"> </el-input>
      <span class="comment" @click="writeComment">评论</span>
    </div>
    <div class="commentlist">
      <h4>精彩评论</h4>
      <ul>
        <li v-for="i in comment" :key="i.commentId">
          <div class="icon">
            <img :src="i.user.avatarUrl" alt="" />
          </div>
          <div class="detail">
            <span>{{ i.user.nickname }}：</span>
            <span class="content">{{ i.content }}</span>
            <div class="rep">
              <ul>
                <li v-for="k in i.beReplied" :key="k.beRepliedCommentId">
                  <span>@{{ k.user.nickname }}：</span>
                  <span class="content">{{ k.content }}</span>
                </li>
              </ul>
              <div class="bottom">
                <span class="time">{{ getDate(i.time) }}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="no" v-if="comment.length == 0">暂无评论</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textarea: "",
      comment: [],
    };
  },
  computed: {
    getDate() {
      return function (t) {
        let date = new Date(t);
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        let d = date.getDate();
        if (d < 10) {
          d = "0" + d;
        }
        if (m < 10) {
          m = "0" + m;
        }
        return y + "-" + m + "-" + d;
      };
    },
  },
  methods: {
    writeComment() {
      this.$request({
        url: "/comment",
        params: {
          type: 2,
          t: 1,
          id: this.$route.query.id,
          content: this.textarea,
        },
        withCredentials: true,
      }).then(()=>{
        this.textarea=''
      });
    },
    initComment() {
      this.$request({
        url: "/comment/playlist",
        params: {
          id: this.$route.query.id,
        },
      }).then((success) => {
        this.comment = success.data.comments;
      });
    },
  },
  mounted() {
    this.initComment()
  },
};
</script>

<style scoped>
.comment {
  margin-top: 10px;
  display: inline-block;
  width: 60px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 15px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}

.commentlist {
  margin-top: 40px;
}
.commentlist ul li {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #f6f6f6;
}
.commentbox {
  margin-top: 20px;
}
.icon {
  margin-right: 10px;
}
.icon img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}
.detail {
  flex: 1;
}
.detail .content {
  font-size: 14px;
  color: gray;
}
.rep ul li {
  border: none;
  padding: 0 10px;
  background-color: #f6f6f7;
  line-height: 30px;
}
.bottom {
  color: gray;
  font-size: 14px;
  margin-top: 10px;
}
.time {
  margin-right: 20px;
}
.no {
  color: gray;
  line-height: 2.5em;
}
</style>